<template>
  <default-layout>
    <header-back text="档案查询" slot="header"></header-back>
    <div slot="main">
      <div class="top-switch">
        <span class="label">查询类型：</span>
        <div class="switch-container">
          <span :class="{current: current === 1}" @click="current = 1">档案号查询</span>
          <span :class="{current: current === 2}" @click="current = 2">机要号查询</span>
        </div>
      </div>
      <transition name="slide" mode="out-in">
        <div class="form" v-if="current === 1" key="form1">
          <yd-cell-group>
            <yd-cell-item>
              <span slot="left" class="label required">姓名</span>
              <xf-input
                slot="right"
                :valid="[{required: true, msg: '请输入姓名'}]"
                v-model="form.name"
                ref="name"
                placeholder="请输入姓名"></xf-input>
            </yd-cell-item>
            <yd-cell-item>
              <span slot="left" class="label required">身份证号</span>
              <xf-input
                slot="right"
                :valid="[{required: false, msg: '请填写身份证号'}, {reg: $regex.idCard, msg: '请填写正确的身份证号'}]"
                v-model="form.cardId"
                ref="cardId"
                placeholder="请填写身份证号"></xf-input>
            </yd-cell-item>
            <yd-cell-item>
              <span slot="left" class="label">档案号</span>
              <xf-input
                slot="right"
                :valid="[{required: false, msg: '请填写档案号'}]"
                v-model="form.no"
                ref="no"
                placeholder="请填写档案号"></xf-input>
            </yd-cell-item>
          </yd-cell-group>
        </div>
        <div class="form" v-if="current === 2" key="form2">
          <yd-cell-group>
            <yd-cell-item>
              <span slot="left" class="label required">姓名</span>
              <xf-input
                slot="right"
                :valid="[{required: true, msg: '请输入姓名'}]"
                v-model="form.name"
                ref="name"
                placeholder="请输入姓名"></xf-input>
            </yd-cell-item>
            <yd-cell-item>
              <span slot="left" class="label required">身份证号</span>
              <xf-input
                slot="right"
                :valid="[{required: false, msg: '请填写身份证号'}, {reg: $regex.idCard, msg: '请填写正确的身份证号'}]"
                v-model="form.cardId"
                ref="cardId"
                placeholder="请填写身份证号"></xf-input>
            </yd-cell-item>
            <yd-cell-item>
              <span slot="left" class="label">机要号</span>
              <xf-input
                slot="right"
                :valid="[{required: false, msg: '请填写机要号'}]"
                v-model="form.no"
                ref="no"
                placeholder="请填写机要号"></xf-input>
            </yd-cell-item>
          </yd-cell-group>
        </div>
      </transition>
      <mt-button type="primary" size="large" @click="onSubmit">查询</mt-button>
    </div>
  </default-layout>
</template>
<script>
  import HeaderBack from '../../../components/header-back/header-back.vue'
  import XfInput from '../../../components/xf-input/xf-input.vue'
  import {validate} from '../../../common/js/util'
  import {mapMutations} from 'vuex'
  import DefaultLayout from '../../../layouts/default-layout/default-layout'

  export default {
    components: {
      DefaultLayout,
      XfInput,
      HeaderBack},
    data() {
      return {
        form: {
          name: '', // name
          no: '', // 档案号、机要号
          cardId: '', // 身份证
          type: '00' // 档案号(00)，机要号(01)
        },
        current: 1
      }
    },
    methods: {
      ...mapMutations({
        setTempQuery: 'SET_TEMP_QUERY'
      }),
      onSubmit() {
        let form = Object.assign({}, this.form)
        validate.bind(this)(form).then(() => {
          this.$post('/admin/person/sapi/personal/records/file/get/info', this.form).then(res => {
            res.data.archivesSearchForm.fileStatus = res.data.status
            this.setTempQuery(res.data.archivesSearchForm)
            this.$router.push({
              name: 'queryList'
            })
          })
        })
      }
    },
    watch: {
      current(newVal, oldVal) {
        if (newVal === 1) {
          this.form.type = '00'
        } else {
          this.form.type = '01'
        }
        this.form.no = ''
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../common/style/variable";
  .top-switch{
    padding: .2rem;
    background: #fff;
    border-bottom: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    .label{
      color: #666;
    }
    .switch-container{
      border: 1px solid $primary;
      border-radius: .2rem;
      display: flex;
      align-items: center;
      overflow: hidden;
      margin: 0 0 0 .15rem;
      span{
        color: $primary;
        display: inline-block;
        padding: .18rem;
        &.current{
          background: $primary;
          color: #fff;
        }
      }
    }
  }
</style>
